<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>菜单管理</title>
<script type="text/javascript">
	var selectedMenu;
	var funcGrid;
	var menuGrid;
	$(function() {
		menuGrid = $("#menuGrid").treegrid({
			toolbar : "#toolbar",
			//checkOnSelect : false,// 选择行将不选中复选框
			method : "get",
			url : "${ctx}/basic/menu/treeGrid",
			idField : 'id',
			treeField : 'menuName',
			remoteSort : false,

			dndRow : true, //此属性开启此表格的行拖动排序功能

			singleSelect : true,
			striped : true,
			selectOnCheck : false,
			checkOnSelect : false,

			rowContextMenu : [ {
				text : "新增根节点",
				iconCls : "icon-add",
				disabled : false,
				handler : function() {
					fun_menu_add_root();
				}
			}, {
				text : "新增同级节点",
				iconCls : "icon-add",
				disabled : false,
				handler : function(e, index, row) {
					fun_menu_add1(index);
				}
			}, {
				text : "新增子节点",
				iconCls : "icon-add",
				disabled : false,
				handler : function(e, index, row) {
					fun_menu_add_child1(index);
				}
			}

			],

			enableRowContextMenu : true, //此属性开启表头列名称右键点击菜单
			//pagingMenu: { submenu: false},    //开启行右键菜单的翻页功能

			dataPlain : true, //该属性用以启用当前 easyui-treegrid 控件对平滑数据格式的支持
			parentField : "menuParentId",

			onDrop : function(targetNode, source, point) {
				var i = targetNode.menuUrl;
				var j = "append";
				var a = "bottom";
				var b = "top";
				var m = targetNode.displayOrder;

				if (i == null) {
					$.post("${ctx}/basic/menu/drop", {
						id : source.id,
						pid : targetNode.id,
						rootid : targetNode.rootId,
					}, function(data) {
						if (!data.success) {
							$.messager.show({
								title : "信息",
								width : 300,
								height : 100,
								msg : data.msg,
								icon : "info",
								position : "bottomRight"
							});
						}
					}, "json");
				} else {
					if (point == j) {
						$.post("${ctx}/basic/menu/drop", {
							id : source.id,
							pid : targetNode.id,
							rootid : targetNode.rootId
						}, function(data) {
							if (!data.success) {
								$.messager.show({
									title : "信息",
									width : 300,
									height : 100,
									msg : data.msg,
									icon : "info",
									position : "bottomRight"
								});
							}
						}, "json");
					} else {
						if (point == a) {
							targetNode.displayOrder = m + 1;
						}
						if (point == b) {
							targetNode.displayOrder = m - 1;
						}
						$.post("${ctx}/basic/menu/drop1", {
							id : source.id,
							pid : targetNode.menuParentId,
							rootid : targetNode.rootId,
							displayOrder : targetNode.displayOrder
						}, function(data) {
							if (!data.success) {
								$.messager.show({
									title : "信息",
									width : 300,
									height : 100,
									msg : data.msg,
									icon : "info",
									position : "bottomRight"
								});
							}
						}, "json");
					}
				}
				;
			},

			onClickRow : function(rowData) {
				selectedMenu = rowData;
				$("#cc").layout("panel", "east").panel({
					title : "菜单【" + rowData.menuName + "】功能管理"
				});
				refreshMenuFunc();//刷新当前菜单的按钮
			}
		});

		funcGrid = $("#funcGrid").datagrid($.extend(datagridOption, {
			toolbar : "#toolbar-func",
			url : "",
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'menu',
				title : '菜单',
				sortable : true,
				formatter : function(value, row, index) {
					return row.menuName;
				}
			}, {
				field : 'functionName',
				title : '功能名称',
				sortable : true
			}, {
				field : 'functionNo',
				title : '功能编号',
				sortable : true
			}, {
				field : 'otherRights',
				title : '其他权限',
				sortable : true
			} ] ]

		}));

		//生成功能管理但不加载
		/* funcGrid = $("#funcGrid").datagrid($.extend(datagridOption,{
			fitColumns : true,
			rownumbers : true,// 显示一个行号列
			checkOnSelect : false,// 选择行将不选中复选框
			idField : 'id',
			toolbar : "#toolbar-func",
			method : "get",
			singleSelect : true,
			pagination : true
		})); */

	});

	//新增子节点
	function fun_menu_add_child() {
		var row = menuGrid.treegrid("getSelected");
		if (row == null) {
			showAlert("您未选择任何记录!");
		} else {
			$("#dlg").dialog("open").dialog("setTitle", "新增下级菜单");
			$("#fm").form("clear").form("load", {
				menuParentId : row.id,
				rootId : row.rootId == "-1" ? row.id : row.rootId
			});
		}
	}

	//新增同级节点
	function fun_menu_add() {
		var row = menuGrid.treegrid("getSelected");
		if (row == null) {
			showAlert("您未选择任何记录!");
		} else {
			$("#dlg").dialog("open").dialog("setTitle", "新增同级节点");
			$("#fm").form("clear").form("load", {
				menuParentId : row.menuParentId,
				rootId : row.rootId == "-1" ? "-1" : row.rootId
			});
		}
	}

	//右键新增子节点
	function fun_menu_add_child1(index) {
		if (index == null) {
			showAlert("您未选择任何记录!");
		} else {
			$("#dlg").dialog("open").dialog("setTitle", "新增下级菜单");
			$("#fm").form("clear").form("load", {
				menuParentId : index.id,
				rootId : index.rootId == "-1" ? index.id : index.rootId
			});
		}
	}

	//右键新增同级节点
	function fun_menu_add1(index) {
		if (index == null) {
			showAlert("您未选择任何记录!");
		} else {
			$("#dlg").dialog("open").dialog("setTitle", "新增同级节点");
			$("#fm").form("clear").form("load", {
				menuParentId : index.menuParentId,
				rootId : index.rootId == "-1" ? "-1" : index.rootId
			});
		}
	}

	//新增根节点
	function fun_menu_add_root() {
		$("#dlg").dialog("open").dialog("setTitle", "新增根节点菜单");
		$("#fm").form("clear").form("load", {
			menuParentId : "",
			rootId : "-1"
		});
	}

	function fun_menu_edit() {
		var row = menuGrid.treegrid("getSelected");
		if (row == null) {
			showAlert("您未选择任何记录!");
		} else {
			$("#dlg").dialog("open").dialog("setTitle", "编辑菜单--[" + row.menuName + "]");
			$("#fm").form("clear");
			$("#fm").form("load", row);
		}
	}

	function fun_menu_save() {
		$("#fm").form("submit", {
			url : "${ctx}/basic/menu/update",
			success : function(result) {
				if (result.success) {
					$("#dlg").dialog("close");
					menuGrid.treegrid("load");
				}
				showInfo(result.msg);
			}
		});
	}

	//删除
	function fun_menu_del() {
		multiDeleteTreeGrid(menuGrid, "${ctx}/basic/menu/multiDelete");
		$("#funcGrid").datagrid({
			url : ""
		});

	}

	function fun_ft_del() {
		multiDeleteDataGrid(funcGrid, "${ctx}/basic/function/multiDelete");
	}

	function refreshMenuFunc() {
		if (!selectedMenu) {
			showAlert("请先选择菜单");
			return false;
		}
		funcGrid.datagrid("loadData", {
			total : 0,
			rows : []
		});
		funcGrid.datagrid({
			url : "${ctx}/basic/function/dataGrid?search_EQ_menu.id=" + selectedMenu.id
		});
	}

	//新增功能
	function fun_function_add() {
		if (!selectedMenu) {
			showAlert("请先选择菜单");
			return false;
		}
		$("#dlg-func").dialog("open").dialog("setTitle", "新增功能");
		$("#fm-func").form("clear").form("load", {
			menu : selectedMenu.id
		});
	}

	//编辑功能
	function fun_function_edit() {
		var row = funcGrid.datagrid("getSelected");
		if (row == null) {
			showAlert("您未选择任何功能");
		} else {
			$("#dlg-func").dialog("open").dialog("setTitle", "编辑功能--【" + row.functionName + "】");
			$("#fm-func").form("clear").form("load", $.extend(row, {
				menu : selectedMenu.id,
			}));
		}
	}

	//编辑功能
	function fun_function_save() {
		$("#fm-func").form("submit", {
			url : "${ctx}/basic/function/update",
			success : function(data) {
				showInfo("保存成功!");
				$("#dlg-func").dialog("close");
				$("#funcGrid").datagrid("load");
			}
		});
	}
	//批量生成功能
	function fun_function_batchadd() {
		if (!selectedMenu) {
			showAlert("请先选择菜单");
			return false;
		}
		$.get("${ctx}/basic/function/batchAdd/" + selectedMenu.id, function(data) {
			$.messager.show({
				msg : data.msg,
				icon : "info",
				position : "bottomRight"
			});
			$("#dlg-func").dialog("close");
			$("#funcGrid").datagrid("load");
		}, "json");
	}
	
	//导入功能
	function fun_ft_imp(){
		$.easyui.importor.showImportor({
			importNo : "menuDtls",
			onExportSuccess : function(file, data) {
				$("#funcGrid").datagrid("load");
			}
		});
	}
	//导出功能
	function fun_ft_exp(){
		alert("?1");
		var url = "${ctx}/basic/function/excelExport?"+ $.param($("#funcGrid").datagrid('options').queryParams);
		alert("?2");
		if ($("#funcGrid").datagrid("options").filterRules) {
			alert("?3");
			url += "&filterRules="+ JSON.stringify($("#funcGrid").datagrid("options").filterRules);
			}
		alert("?4");
		window.parent.location.href = url;
		}
</script>
</head>
<body>
	<div data-options="region:'center'" style="padding: 1px;">
		<div id="cc" class="easyui-layout" data-options="fit:true" style="width: 480px; height: 440px;">
			<div data-options="region:'center'" style="padding: 1px; witdh: 600px">
				<table id="menuGrid" data-options="fit:true">
					<thead>
						<tr>
							<th data-options="field:'ck',checkbox:true"></th>
							<th data-options="field:'id'" hidden="true"></th>
							<th data-options="field:'menuParentId'" hidden="true"></th>
							<th data-options="field:'rootId'" hidden="true"></th>
							<th data-options="field:'menuName',width:150">菜单名称</th>
							<th data-options="field:'menuUrl'" align="left">菜单url</th>
							<th data-options="field:'controller'">controller</th>
							<th data-options="field:'displayOrder'">排序</th>
							<th data-options="field:'menuTips'">提示</th>
							<th data-options="field:'iconClass'">图标</th>
							<th data-options="field:'otherRights'">权限</th>
						</tr>
					</thead>
				</table>
				<div id="toolbar" class="row">
					<div class="col-md-12">
						<shiro:hasPermission name="menu:update">
							<button id="btn-add" type="button" class="btn btn-primary" onclick="fun_menu_add_root();">
								<span class="glyphicon glyphicon-plus"></span> 新增根节点
							</button>
							<button id="btn-add" type="button" class="btn btn-primary" onclick="fun_menu_add();">
								<span class="glyphicon glyphicon-plus"></span> 新增同级节点
							</button>
							<button id="btn-add" type="button" class="btn btn-primary" onclick="fun_menu_add_child();">
								<span class="glyphicon glyphicon-plus"></span> 新增子节点
							</button>
							<button id="btn-edit" type="button" class="btn btn-primary" onclick="fun_menu_edit()">
								<span class="glyphicon glyphicon-pencil"></span> 修改
							</button>
						</shiro:hasPermission>
						<shiro:hasPermission name="menu:delete">
							<button id="btn-delete" type="button" class="btn btn-danger" onclick="fun_menu_del();">
								<span class="glyphicon glyphicon-minus"></span> 删除
							</button>
						</shiro:hasPermission>
					</div>
					<%-- <a id="btn-delete" href="#" class="easyui-linkbutton" data-options="" onclick="TreeGridDelete('#menuGrid','${ctx}/basic/menu/delete')">删除</a> --%>
				</div>
				<shiro:hasPermission name="menu:update">
					<div id="dlg" class="easyui-dialog" style="width: 400px; height: 410px; padding: 10px 20px"
						data-options="closed:true,buttons:'#dlg-buttons'">
						<form id="fm" method="post">
							<input id="id" type="hidden" name="id" />
							<input id="menuParentId" type="hidden" name="menuParentId" />
							<input id="rootId" type="hidden" name="rootId" />
							<table id="tbl">
								<tr>
									<td><label>菜单名称:</label></td>
									<td><input name="menuName" class="easyui-validatebox" data-options="required:true"></td>
								</tr>
								<tr>
									<td><label>菜单url:</label></td>
									<td><input name="menuUrl" class="easyui-validatebox"></td>
								</tr>
								<tr>
									<td><label>controller:</label></td>
									<td><input name="controller" class="easyui-validatebox"></td>
								</tr>
								<tr>
									<td><label>排序:</label></td>
									<td><input name="displayOrder" class="easyui-validatebox"></td>
								</tr>
								<tr>
									<td><label>menuTips:</label></td>
									<td><input name="menuTips" class="easyui-validatebox"></td>
								</tr>
								<tr>
									<td><label>iconClass:</label></td>
									<td><input name="iconClass" class="easyui-validatebox"></td>
								</tr>
								<tr>
									<td><label>otherRights:</label></td>
									<td><input name="otherRights" class="easyui-validatebox"></td>
								</tr>
							</table>
						</form>
					</div>
					<div id="dlg-buttons">
						<button id="add" type="button" class="btn btn-primary" onclick="fun_menu_save();">
							<span class="glyphicon glyphicon-ok"></span> 保存
						</button>
						<button id="edit" type="button" class="btn btn-primary" onclick="$('#dlg').dialog('close');">
							<span class="glyphicon glyphicon-remove"></span> 取消
						</button>
					</div>
				</shiro:hasPermission>
			</div>
			<div data-options="region:'east', title:'菜单功能', split: true, collapsible:true" style="padding: 1px; witdh: 400px">
				<table id="funcGrid" data-options="fit:true">
					<!-- <thead>
						<tr>
							<th data-options="field:'id'" hidden="true"></th>
							<th data-options="field:'functionName'">功能名称</th>
							<th data-options="field:'functionNo'">功能编号</th>
							<th data-options="field:'otherRights'">其他权限</th>
						</tr>
					</thead> -->
				</table>
				<div id="toolbar-func" class="row">
					<div class="col-md-12">
						<shiro:hasPermission name="menu:update">
							<button id="btn-add" type="button" class="btn btn-primary" onclick="fun_function_add();">
								<span class="glyphicon glyphicon-plus"></span> 新增
							</button>
							<button id="btn-edit" type="button" class="btn btn-primary" onclick="fun_function_edit();">
								<span class="glyphicon glyphicon-pencil"></span> 修改
							</button>
							<button id="btn-addAll" type="button" class="btn btn-primary" onclick="fun_function_batchadd();">
							<span class="glyphicon glyphicon-plus-sign"></span> 自动生成
							</button>
						</shiro:hasPermission>
						
						<shiro:hasPermission name="menu:import">
							<button id="import" type=" button" class="btn btn-primary" onclick="fun_ft_imp();">
								<span class="glyphicon glyphicon-open"></span> 导入
							</button>
						</shiro:hasPermission>
						<shiro:hasPermission name="menu:export">
							<button id="export" type="button" class="btn btn-primary" onclick="fun_ft_exp();">
								<span class="glyphicon glyphicon-save"></span> 导出
							</button>
						</shiro:hasPermission>
						<shiro:hasPermission name="menu:delete">
							<button id="delete" type="button" class="btn btn-danger" onclick="fun_ft_del();">
								<span class="glyphicon glyphicon-minus"></span> 删除
							</button>
						</shiro:hasPermission>
					</div>
				</div>
				<shiro:hasPermission name="menu:update">
					<div id="dlg-func" class="easyui-dialog" style="width: 400px; height: 260px; padding: 10px 20px"
						data-options="closed:true,resizable:true,modal:true,buttons:'#dlg-buttons-func'">
						<form id="fm-func" method="post">
							<input id="id" type="hidden" name="id" />
							<input id="menu" type="hidden" name="menu" />

							<table id="tbl">
								<tr>
									<td><label>功能编号:</label></td>
									<td><input name="functionNo" class="easyui-validatebox" data-options="required:true" /></td>
								</tr>
								<tr>
									<td><label>功能名称:</label></td>
									<td><input name="functionName" class="easyui-validatebox" data-options="required:true" /></td>
								</tr>
								<tr>
									<td><label>额外权限:</label></td>
									<td><input name="otherRights" class="easyui-textbox" /></td>
								</tr>
							</table>

						</form>
						<div id="dlg-buttons-func">
							<button id="add" type="button" class="btn btn-primary" onclick="fun_function_save();">
								<span class="glyphicon glyphicon-ok"></span> 保存
							</button>
							<button id="edit" type="button" class="btn btn-primary" onclick="$('#dlg-func').dialog('close');">
								<span class="glyphicon glyphicon-remove"></span> 取消
							</button>
						</div>
					</div>
				</shiro:hasPermission>
			</div>
		</div>
	</div>
</body>
</html>
